<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue模板语法</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    Vue模板语法有2大类：
      1. 插值语法
        功能：用于解析标签体内容。
        写法：{{xxx}}，xxx是表达式，且可以直接读取到data中的所有属性。
      2. 指令语法
        功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。
        举例：v-bind:href="xxx" 或 简写为:href="xxx"，xxx同样需要写js表达式，且可以直接读取到data中的所有属性。
        备注：Vue中有很多的指令，且形式都是：v-???
   -->
   <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a :href="url">点击跳转</a>
    <a v-bind:href="url">点击跳转</a>
  </div>
   <script>
     Vue.config.productionTip = false;

     new Vue({
       el: "#root",
       data: {
        name: "jack",
        url: "http://www.atguigu.com/"
       }
     })
   </script>
</body>
</html>